import React, { Component } from 'react'
import {
    startLoadMyCandidateDetails, startUpdateMyCandidateDetails,
    startUpdateMyCandidateSkills
} from '../../actions/my-details';
import { connect } from 'react-redux';
import { CandidateCard } from './CandidateCard';
import { FormInput } from '../FormInput';
import { SkillsEditor } from '../SkillsEditor';

class CandidateProfileComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            first_name: '',
            last_name: '',
            pitch: '',
            visa_status: '',
            phone_number: '',
            location: '',
            public_id: '',
            skills: []
        }
    }

    onFirstNameChange = (e) => {
        const firstName = e.target.value;
        this.setState(() => ({
            first_name: firstName
        }));
    }
    onLastNameChange = (e) => {
        const lastName = e.target.value;
        this.setState(() => ({
            last_name: lastName
        }));
    };
    onPitchChange = (e) => {
        const pitch = e.target.value;
        if (pitch.length > 200) {
            return
        }
        this.setState(() => ({
            pitch
        }));
    };
    onLocationChange = (e) => {
        const location = e.target.value;
        this.setState(() => ({
            location
        }));
    };
    onVisaStatusChange = (e) => {
        const visaStatus = e.target.value;
        this.setState(() => ({
            visa_status: visaStatus
        }));
    };
    onPhoneNumberChange = (e) => {
        const phoneNumber = e.target.value;
        this.setState(() => ({
            phone_number: phoneNumber
        }));
    };
    onUpdateCandidate = (e) => {
        e.preventDefault();
        
        this.props.startUpdateMyCandidateDetails(
            this.props.token,
            {
                ...this.state
            }
        )
        this.props.startUpdateMyCandidateSkills(
            this.props.token,
            {
                skills: this.state.skills.map(s => s.name)
            }
        )

    };
    componentDidMount() {
        if(this.props.me.public_id) {
            this.setState(() => ({
                ...this.props.me
            }));
        } else {
            this.props.startLoadMyDetails(this.props.token)
                .then(() => {
                    this.setState(() => ({
                        ...this.props.me
                    }));
                });
        }
    }

    onSkillsChanged = (skills) => {
        this.setState(() => ({
            skills: skills.map(s => ({
                id: 'none',
                name: s.text,
                description: 'autogenerated'
            }))
        }));
    }

    render() {
        return (
            <div className="container">
                <div className="row">
                    <div className="col">
                        <h2 className="page-header">Update your profile</h2>
                    </div>
                </div>
                <div className="row">
                    <div className="col-md-8 col-sm-12">
                        <div className="row">
                            <div className="col">
                                <form onSubmit={this.onUpdateCandidate}>
                                    <div className="form-row">
                                        <FormInput
                                            classExtras="col-md-6"
                                            fieldId="firstName"
                                            label="First Name"
                                            placeholder="First Name"
                                            value={this.state.first_name}
                                            onFieldChange={this.onFirstNameChange}
                                        />
                                        <FormInput
                                            classExtras="col-md-6"
                                            fieldId="lastName"
                                            label="Last Name"
                                            placeholder="Last Name"
                                            value={this.state.last_name}
                                            onFieldChange={this.onLastNameChange}
                                        />

                                    </div>
                                    <div className="form-row">
                                        <div className="form-group col-md-12">
                                            <label htmlFor="pitchField">Write your elevator pitch here</label>
                                            <textarea
                                                className="form-control"
                                                id="pitchField"
                                                rows="3"
                                                value={this.state.pitch}
                                                onChange={this.onPitchChange}
                                            ></textarea>
                                            <small id="pitchHelp" className="form-text text-muted">
                                                {
                                                    `${200 - this.state.pitch.length} chars remaining`
                                                }
                                            </small>
                                        </div>
                                    </div>
                                    <div className="form-row">
                                        <FormInput
                                            classExtras="col-md-6"
                                            fieldId="location"
                                            label="Location"
                                            placeholder="Location"
                                            value={this.state.location}
                                            onFieldChange={this.onLocationChange}
                                        />
                                        <FormInput
                                            classExtras="col-md-6"
                                            fieldId="phoneNumber"
                                            label="Phone Number"
                                            placeholder="Phone Number"
                                            value={this.state.phone_number}
                                            onFieldChange={this.onPhoneNumberChange}
                                        />
                                    </div>
                                    <div className="form-row">
                                        <FormInput
                                            classExtras="col-md-6"
                                            fieldId="visaStatus"
                                            label="Visa Status"
                                            placeholder="Visa Status"
                                            value={this.state.visa_status}
                                            onFieldChange={this.onVisaStatusChange}
                                        />

                                    </div>
                                    <div className="form-row">
                                        {
                                            this.props.me.skills && (
                                                <SkillsEditor
                                                    label="Your Skills"
                                                    skills={this.state.skills}
                                                    onSkillsChanged={this.onSkillsChanged}
                                                />
                                            )
                                        }
                                    </div>
                                    <button
                                        className="btn btn-primary"
                                        disabled={!this.state.public_id}
                                    >
                                        Update Profile
                                    </button>
                                </form>
                            </div>
                        </div>

                    </div>
                    <div className="col-md-4 d-none d-md-block">
                        <p>This is how your updated card will appear to other people</p>
                        <CandidateCard
                            candidate={{
                                ...this.state,
                                full_name:this.state.first_name + ' ' + this.state.last_name
                            }}/>

                    </div>
                </div>


            </div>
        )
    }
}

const mapStateToProps = (state) =>  ({
    token: state.auth.token,
    me: state.myDetails.me
});

const mapDispatchToProps = (dispatch) => ({
    startLoadMyDetails: (token) => dispatch(startLoadMyCandidateDetails(token)),
    startUpdateMyCandidateDetails: (token, candidateDetails) => dispatch(startUpdateMyCandidateDetails(token, candidateDetails)),
    startUpdateMyCandidateSkills: (token, skills) => dispatch(startUpdateMyCandidateSkills(token, skills))
});

const CandidateProfile = connect(mapStateToProps, mapDispatchToProps)(CandidateProfileComponent)

export { CandidateProfile }